import React, {Component, PropTypes} from "react";
import {StyleSheet, View, Text} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

/**
 * 自定义头像，给出可配置的信息为图片，大小，文字，颜色
 */
export default class Avatar extends Component {
    //外部传递进来的参数,获得的属性
    static propTypes = {
        icon: PropTypes.string,
        width: PropTypes.number,
        backgroundColor: PropTypes.string,
        text: PropTypes.string,
        textSize: PropTypes.number
    };

    //默认的属性
    static defaultProps = {
        width: 40,
        backgroundColor: 'skyblue',
        textSize: 15
    };

    render() {
        //进行解构赋值
        const{icon, width, backgroundColor, text, textSize} = this.props;
        if (icon) {
            return(
                <View style={[{width: width, height: width, borderRadius: width / 2,
                    backgroundColor: backgroundColor}, styles.cell]}>
                    <Icon name={icon} color="#fff" size={width/2}/>
                </View>
            )
        } else if (text) {
            return (
                <View style={[{width: width, height: width, borderRadius: width / 2,
                    backgroundColor: backgroundColor}, styles.cell]}>
                    <Text style={{color: '#fff', fontSize: textSize}}>{text}</Text>
                </View>
            )
        }
        return null;
    }

}

const styles = StyleSheet.create({
   cell: {
       alignItems: 'center',
       justifyContent: 'center'
   }
});